<template>
  <view
    v-if="_width != '0px' && _width != '0%'"
    :style="[_width ? { width: _width } : '']"
    class="flex flex-row flex-row-top-start py-6"
  >
    <view
      :style="[labelWidth ? { width: labelWidth + 'rpx' } : '']"
      class="flex-shrink "
    >
      <tm-text _class="opacity-7" :font-size="_fontSize" :label="props.label"></tm-text>
    </view>
    <view class="flex-1 wrap" :style="{width:'0px'}">
      <slot
      ><tm-text
        :color="props.color"
        _class="px-16"
        :font-size="_fontSize"
        :label="props.value"
      ></tm-text
    ></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import tmText from "../tm-text/tm-text.vue";
import { computed, inject } from "vue";
const _width: string = inject("tmDescriptionsItem", "");
const labelWidth: string = inject("tmDescriptionsLabelWidth", "");
const props = defineProps({
  label: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "",
  },
  fontSize: {
    type: Number,
    default: 23,
  },
});
const _fontSize = computed(() => props.fontSize);
</script>

<style></style>
